﻿<script src="https://cdn.bootcdn.net/ajax/libs/qrcodejs/1.0.0/qrcode.min.js"></script>

<div class="fitem_auto padding_H" id="Root">
    <div v-show="msg" class="msgbox_alert">{{msg}}</div>
    <div v-show="active">
        <buttonlist :hook="hooks[0]" :set="sets[0]" class="wyjcontainer_H border_B padding_V"></buttonlist>
        <pagenation :hook="hooks[1]" :set="table" :api="Api" hasToolbar="yes">
            <template #toolbar="postData">
                <input placeholder="请输入批次号" v-model="postData.queryKeys.key" />
            </template>
            <template #td="models">
                <td><a class="tooltip" @@click="Switch(3, models.model)">{{models.model.Batch}}<span class="tooltiptext">查看详情</span></a></td>
                <td>{{models.model.Production.Name}}</td>
                <td>{{models.model.Customer.Name}}</td>
                <td>
                    <a v-for="(btn,i) in icons" :key="i" :class="btn.class" @@click="btn.act(models.model)"><i :class="btn.icon"></i></a>
                </td>
            </template>
        </pagenation>
    </div>
    <div v-show="!active" class="exclusive wyjcontainer_V">
        <buttonlist :hook="hooks[2]" :set="sets[1]" class="wyjcontainer_HL border_B padding_V"></buttonlist>
        <editor :hook="hooks[3]" :set="labels">
            <template v-if="viewMode" #ele>
                <div class="formGroup_ele" v-for="(y,x) in labels" :key="x">{{model[x].Name || model[x]}}</div>
            </template>
            <template v-else #ele="slotProps">
                <select class="formGroup_ele" v-model="model.Production">
                    <option value="">请选择产品</option>
                    @{
                        var Productions = WYJWeb.Models.BaseInfo.Production.GetAll();
                        foreach (var option in Productions)
                        {
                            <option value="@option.Key">@option.Value.Name</option>
                        }
                    }
                </select>
                <select class="formGroup_ele" v-model="model.Customer">
                    <option value="">请选择客户</option>
                    @{
                        var Customers = WYJWeb.Models.BaseInfo.Customer.GetAll();
                        foreach (var option in Customers)
                        {
                            <option value="@option.Key">@option.Value.Name</option>
                        }
                    }
                </select>
                <input class="formGroup_ele" v-model="model.LotNo" placeholder="请输入批次号" />
            </template>
            <template #subtmpl>
            </template>
        </editor>
        <buttonlist :hook="hooks[4]" :set="sets[2]" class="wyjcontainer_HM padding_V border_T"></buttonlist>
    </div>
    <wyjdialog title="预览二维码" hook="dialog">
        <template #content="postData">
            <div id="qrcode" style="margin:0 auto" class="padding_V">
            </div>
        </template>
    </wyjdialog>
</div>

@section foot {
    <script type="text/javascript">
        var app = new App({
            Api: 'QrCode',
            table: {
                titles: ["批次号", "产品名称", "所属客户", "操作"],
            },
            PageTitles: ['二维码列表', '新增二维码', '编辑二维码', '查看二维码'],
            icons: [{
                icon:'fa fa-trash',
                act: (e, i) => {
                    app.DeleteById(e.Id, i)
                }
            }, {
                icon:'fa fa-pencil-square-o',            
                act: (e) => {
                    app.Switch(2, e);
                }
            }, {
                icon:'fa fa-print',            
                act: (e) => {
                    alert('请连接打印机');
                }
            }, {
                icon:'fa fa-eye',            
                act: (e) => {
                    var qrcode = document.getElementById('qrcode');
                    qrcode.innerHTML = null;
                    new QRCode(qrcode,`${e.Id}`);
                    Store.dialog.show=1;
                }
            }],
            labels: {
                Production:'产品名称',
                Customer:'所属客户',
                Batch: '批次号',
            },
        });
        app.BeforeSave = function(model){
            model.Customer = { Id: model.Customer };
            model.Production = { Id: model.Production };
            console.log(model);
            return model;
        }
    </script>
}